<script setup lang="ts">
import { computed } from 'vue';


const props = defineProps({
  total: {
    type: Number,
    required: true
  },
  current: {
    type: Number,
    required: true
  },
});

defineEmits(['back', 'next']);


const format = (percentage: number) => ((props.current + 1) + '/' + props.total);

</script>

<template>
  <el-row class="wrapper">
    <el-button
      class="btn"
      :disabled="current == 0"
      @click="$emit('back')">上一题</el-button>
    <el-progress 
      class="progress-bar"
      :text-inside="true"
      :stroke-width="24"
      :percentage="(current + 1) / total * 100"
      :format="format"/>
    <el-button
      class="btn"
      v-if="total != current + 1"
      @click="$emit('next')">下一题</el-button>
    <el-button
      class="btn"
      type="success"
      v-else
      @click="$emit('next')">完成</el-button>
  </el-row>
</template>

<style scoped>
  .wrapper {
    align-items: center;
  }
  .progress-bar {
    flex-grow: 1;
    padding: 20px;
  }

  .btn {
    min-width: 5rem;
  }
</style>